<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*
      为div的子元素span设置一个字体颜色红色

      子元素选择器
         作用：选中指定父元素的指定子元素
         语法：父元素 > 子元素{}
      */
    /*  div > span{
          color: red;
      }*/

    /*  后代元素选择器：
           作用：选中指定元素内的指定后代元素
           语法：祖先  后代{}
    */
    /*  div span{
          color: skyblue;
      }*/

    /*  选中下一兄弟
             语法：前一个 + 下一个
         选择下边所有的兄弟
            语法：兄 ~ 第
    */
      p +span{
          color: green;
      }

      p ~ span{
          color: green;
          font-size: 60px;
      }
    </style>
</head>
<body>
<!--
   父元素:
       --直接包含子元素的元素叫作父元素
    子元素：
      --直接被父元素包含的元素是子元素
     祖先元素:
         --直接或或间接包含后代元素的元素叫做祖先元素
         --一个元素的父元素也是它的祖先元素
       后代元素：
          --直接或间接被祖先元素包含的元素叫做后代元素
          --子元素也是后代元素
        兄弟元素：
           --拥有相同父元素的元素叫做兄弟元素

-->
 <div>
     我是一个div
     <p>
         我是div中的p元素
         <span>我是p元素中span</span>
     </p>
     <span>我是div中span元素</span>
 </div>
 <p>我是p元素</p>
<span>我是span元素</span>
</body>
</html>